import {
  AppstoreOutlined,
  CodeOutlined,
  ConsoleSqlOutlined,
  DatabaseOutlined,
  EditOutlined,
  FileOutlined,
  FormOutlined,
  HomeOutlined,
  LockOutlined,
  SecurityScanOutlined,
  ShareAltOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Avatar, Menu, MenuProps, Popover } from 'antd';
import { useAtom } from 'jotai';
import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useLocation, useNavigate } from 'react-router-dom';

import useScreenSize from '@/hooks/useScreenSize';
import useTitle from '@/hooks/useTitle';
import UserCard from '@/pages/user/components/UserCard';
import userAtom from '@/store/userStore';

import SwitchDarkMode from './SwitchDarkMode';
import SwitchLang from './SwitchLang';

const HdpiHeader: React.FC = () => {
  const title = useTitle();
  const { t } = useTranslation();
  const location = useLocation();
  const navigate = useNavigate();
  const { isMobile } = useScreenSize();
  const [userState] = useAtom(userAtom);

  const routerKey = useMemo(() => location.pathname, [location]);
  const userModule = useMemo(() => {
    // 用户未登录渲染
    if (!userState?.token) {
      return {
        key: '/user',
        icon: <UserOutlined />,
        label: t('user'),
      };
    }
    // 用户登录渲染
    return {
      key: '/user',
      label: (
        <Popover
          content={<UserCard />}
          destroyTooltipOnHide={false}
          placement={isMobile ? 'bottomLeft' : 'bottom'}
        >
          <Avatar shape="square" icon={<UserOutlined />} src={userState.avatar} />
        </Popover>
      ),
    };
  }, [userState]);

  const items: MenuProps['items'] = [
    {
      label: t('home'),
      key: '/',
      icon: <HomeOutlined />,
    },
    {
      label: t('instructions'),
      key: '/instructions',
      icon: <FormOutlined />,
    },
    {
      label: t('vulnerable'),
      key: 'Vulnerable',
      icon: <SecurityScanOutlined />,
      children: [
        {
          label: 'XSS',
          key: '/xss',
          icon: <EditOutlined />,
          children: [
            {
              label: 'Reflect',
              key: '/xss/reflect',
            },
            {
              label: 'Dom',
              key: '/xss/dom',
            },
            {
              label: 'Href',
              key: '/xss/href',
            },
            {
              label: 'Store',
              key: '/xss/store',
            },
          ],
        },
        {
          label: 'RCE',
          key: '/rce',
          icon: <CodeOutlined />,
          children: [
            {
              label: 'Ping',
              key: '/rce/ping',
            },
            {
              label: 'Exec',
              key: '/rce/exec',
            },
          ],
        },
        {
          label: 'CSRF',
          key: '/csrf',
          icon: <ShareAltOutlined />,
          children: [
            {
              label: 'Low',
              key: '/csrf/low',
            },
            {
              label: 'Mid',
              key: '/csrf/mid',
            },
          ],
        },
        {
          label: 'SQLI',
          key: '/sqli',
          icon: <ConsoleSqlOutlined />,
          children: [
            {
              label: 'String',
              key: '/sqli/string',
            },
            {
              label: 'Number',
              key: '/sqli/number',
            },
          ],
        },
        {
          label: 'FILE',
          key: '/fileUpload',
          icon: <FileOutlined />,
          children: [
            {
              label: 'Upload',
              key: '/file/upload',
            },
            {
              label: 'Download',
              key: '/file/download',
            },
          ],
        },
        {
          label: 'BURST',
          key: '/burst',
          icon: <LockOutlined />,
          children: [
            {
              label: 'Normal',
              key: '/burst/normal',
            },
            {
              label: 'Delay',
              key: '/burst/delay',
            },
            {
              label: 'Limit',
              key: '/burst/limit',
            },
          ],
        },
        {
          label: 'SCENE',
          key: '/scene',
          icon: <AppstoreOutlined />,
        },
      ],
    },
    {
      label: t('database'),
      key: '/database',
      icon: <DatabaseOutlined />,
    },
    userModule,
  ];

  const onSelect = ({ key }: any) => {
    if (key === '/user' && !userState?.token) {
      navigate('/auth');
    } else if (key !== '/user') {
      navigate(key);
    }
  };

  return (
    <div className="flex items-center ldpi:justify-center hdpi:justify-between w-react h-20">
      <div className="flex items-center h-full">
        <h2 className="ldpi:hidden hdpi:block leading-[80px] text-2xl font-bold cursor-pointer">
          {title}
        </h2>
        <SwitchLang className="ml-6" />
        <SwitchDarkMode className="ml-6" />
      </div>
      <div className="flex items-center h-full">
        <Menu
          selectedKeys={[routerKey]}
          className="w-[600px] justify-center 3xl:justify-end"
          mode="horizontal"
          forceSubMenuRender={false}
          overflowedIndicator={undefined}
          items={items}
          onSelect={onSelect}
        />
      </div>
    </div>
  );
};

export default HdpiHeader;
